<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }

        .el-collapse-item__header {
            background: #1cbbb4;
            color: white;
            font-size: 20px;
            padding-left: 20px;
        }
        .el-pagination__total {
            color: white
        }

        .el-tabs--card > .el-tabs__header .el-tabs__item {
            border-bottom: 0px
        }

        .el-tabs--card > .el-tabs__header {
            border-bottom: 0px
        }

        .el-tabs--card > .el-tabs__header .el-tabs__nav {
            border: 0px;
        }

        .el-tabs__item {
            color: #409EFF;
            font-size: 18px;
        }

        .el-tabs--card > .el-tabs__header .el-tabs__item {
            border-left: 1px solid #00c5cc
        }

        .el-tabs__item.is-active {
            color: #00c5cc;
        }

        .el-input__inner{
            background: transparent;
        }

        .el-form--inline .el-form-item__label{
            color: white;
        }
        .el-table .warning-row {
            background:#080d20;
            color: #1874dd;
            font-size: 16px;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background:#18456c;
        }
       .el-table .success-row {
            background:#080d20;
            color: #1874dd;
            font-size: 16px;
        }
          .el-table .dark-blue{
            background:#080d20;
            color: #1874dd;
            font-size: 18px;
            font-weight: 900;
        }
        .el-table__body{
            height: 100%;
        }
        .el-table td, .el-table th.is-leaf{
            border-bottom: 0;
        }
          tr td:first-child {
            width: 100px;
        }
         .el-table--fit{
            background: transparent;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-form :inline="true" :model="param" class="demo-form-inline"  label-width="120px">
                <el-form-item label="企业名称">
                    <el-input v-model="param.projectName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="param.deviceName" placeholder="设备名称"></el-input>
                </el-form-item>
                <el-form-item label="设备编码">
                    <el-input v-model="param.deviceNo" placeholder="设备编码"></el-input>
                </el-form-item>
                <el-form-item label="接收人">
                    <el-input v-model="param.receiverName" placeholder="接收人"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="param.receiver" placeholder="电话号码"></el-input>
                </el-form-item>
                <el-form-item label="时间月份">
                    <el-date-picker
                            v-model="param.date"
                            value-format="yyyy-MM"
                            type="month"
                            placeholder="选择月" style="width: 202px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="发送状态">
                    <el-select v-model="param.sendFlag" placeholder="发送状态" style="width: 202px">
                        <el-option label="所有" value="-1"></el-option>
                        <el-option label="未发送" value="0"></el-option>
                        <el-option label="发送成功" value="1"></el-option>
                        <el-option label="发送失败" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search_btn" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-tab-pane label="短信推送" name="msg_tab">
                <el-table :data="msg_table" height="400" style="margin-bottom: 40px;width: 100%"  size="mini"         :row-class-name="tableRowClassName" :header-cell-class-name="tableHeaderClass">
                    <el-table-column  prop="projectName" label="企业名称" align="center" ></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
                    <el-table-column prop="deviceNo" label="设备编码" align="center"></el-table-column>
                    <el-table-column prop="receiverName" label="接收人" align="center"></el-table-column>
                    <el-table-column prop="receiver" label="接收电话" align="center"></el-table-column>
                    <el-table-column prop="contents" label="告警内容" align="center"></el-table-column>
                    <el-table-column prop="eventTime" label="告警时间" align="center"></el-table-column>
                    <el-table-column prop="sendTime" label="推送时间" align="center"></el-table-column>
                    <el-table-column prop="sendFlag" label="发送状态" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.sendFlag == '1'">
                                <el-tag type="success">发送成功</el-tag>
                            </template>
                            <template v-else-if="scope.row.sendFlag == '2'">
                                <el-tag type="danger">发送失败</el-tag>
                            </template>
                            <template v-else>
                                <el-tag type="info">未发送</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendresult" label="说明" align="center"></el-table-column>
                </el-table>


            </el-tab-pane>
            <el-tab-pane label="语音推送" name="voice_tab">
                <el-table :data="voice_table"  height="400" style="margin-bottom: 40px;width: 100%"  size="mini"         :row-class-name="tableRowClassName"
                          :header-cell-class-name="tableHeaderClass">
                    <el-table-column  prop="projectName" label="企业名称" align="center" ></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
                    <el-table-column prop="deviceNo" label="设备编码" align="center"></el-table-column>
                    <el-table-column prop="receiverName" label="接收人" align="center"></el-table-column>
                    <el-table-column prop="receiver" label="接收电话" align="center"></el-table-column>
                    <el-table-column prop="contents" label="告警内容" align="center"></el-table-column>
                    <el-table-column prop="eventTime" label="告警时间" align="center"></el-table-column>
                    <el-table-column prop="sendTime" label="推送时间" align="center"></el-table-column>
                    <el-table-column prop="sendFlag" label="发送状态" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.sendFlag == '1'">
                                <el-tag type="success">发送成功</el-tag>
                            </template>
                            <template v-if="scope.row.sendFlag == '2'">
                                <el-tag type="danger">发送失败</el-tag>
                            </template>
                            <template v-else>
                                <el-tag type="info">未发送</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendresult" label="说明" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="微信推送" name="wx_tab">
                <el-table :data="wx_table" height="400" style="margin-bottom: 40px;width: 100%"  size="mini"         :row-class-name="tableRowClassName"
                          :header-cell-class-name="tableHeaderClass">
                    <el-table-column  prop="projectName" label="企业名称" align="center" ></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
                    <el-table-column prop="deviceNo" label="设备编码" align="center"></el-table-column>
                    <el-table-column prop="receiverName" label="接收人" align="center"></el-table-column>
                    <el-table-column prop="contents" label="告警内容" align="center"></el-table-column>
                    <el-table-column prop="eventTime" label="告警时间" align="center"></el-table-column>
                    <el-table-column prop="sendTime" label="推送时间" align="center"></el-table-column>
                    <el-table-column prop="sendFlag" label="发送状态" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.sendFlag == '1'">
                                <el-tag type="success">发送成功</el-tag>
                            </template>
                            <template v-if="scope.row.sendFlag == '2'">
                                <el-tag type="danger">发送失败</el-tag>
                            </template>
                            <template v-else>
                                <el-tag type="info">未发送</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendresult" label="说明" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="param.totalCount"
                           :current-page.sync="param.pageno" @current-change="onChangePage">
            </el-pagination>
        </div>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            msg_table:[],
            voice_table:[],
            wx_table:[],
            activeName:'msg_tab',
            param: {
                projectName: '',
                deviceName: '',
                receiverName:'',
                receiver:'',
                date:'',
                sendFlag:'',
                deviceNo:'',
                pagesize:10,
                pageno:1,
                totalCount:10,
                serviceId:1,
            },
        },
        created: function () {
            $('.page').show();
            this.loadData();
        },
        methods: {
            cancelDetail() {
                this.detailFormVisible = false;
                this.DetailData = {};
            },
            loadData: function () {
                let param = this.param;
                param.year = this.param.date.split('-')[0];
                param.month = this.param.date.split('-')[1];
                HttpUtil.get('Msg/QueryMsg',param).success((r)=>{
                         this.msg_table = r.data;
                         this.voice_table = r.data;
                         this.wx_table = r.data;
                         this.param.totalCount = r.total;
                })
            },
            handleClick(tab){
                switch (tab.name) {
                    case 'msg_tab':
                        this.param.pageno = 1;
                        this.param.serviceId  = 1;
                        break
                    case 'voice_tab':
                        this.param.pageno = 1;
                        this.param.serviceId  = 2;
                        break
                    case 'wx_tab':
                        this.param.pageno = 1;
                        this.param.serviceId  = 3;
                        break;
                }
                this.loadData();
            },
            onChangePage(page){
              this.param.pageno = page;
              this.loadData();
            },
            search_btn(){
                this.param.pageno = 1;
                this.loadData();
            },
            tableRowClassName({row, rowIndex}) {

                return 'warning-row';
            },
            tableHeaderClass(){
                return 'dark-blue';
            },
        },
        mounted: function () {
            this.param.date = TimeUtil.convertToString(new Date()).substr(0,7);
        }
    });
</script>
</body>
</html>
